<template>
  <h2 class="text-3xl font-semibold leading-7 text-gray-900 mb-10">
    {{ $t('pageServerPowerOperations.currentStatus') }}
  </h2>

  <el-row>
    <el-col>
      <dl>
        <dt class="font-semibold">
          {{ $t('pageServerPowerOperations.serverStatus') }}
        </dt>
        <dd
          v-if="serverStatus === 'on'"
          data-test-id="powerServerOps-text-hostStatus"
        >
          {{ $t('global.status.on') }}
        </dd>
        <dd
          v-else-if="serverStatus === 'off'"
          data-test-id="powerServerOps-text-hostStatus"
        >
          {{ $t('global.status.off') }}
        </dd>
        <dd v-else>
          {{ $t('global.status.notAvailable') }}
        </dd>
      </dl>
    </el-col>
  </el-row>
  <el-row class="mb-20">
    <el-col>
      <dl>
        <dt class="font-semibold">
          {{ $t('pageServerPowerOperations.lastPowerOperation') }}
        </dt>
        <dd
          v-if="lastPowerOperationTime"
          data-test-id="powerServerOps-text-lastPowerOp"
        >
          {{ globalStore.formatDateTime(lastPowerOperationTime) }}
        </dd>
        <dd v-else>--</dd>
      </dl>
    </el-col>
  </el-row>
  <el-row>
    <el-col v-if="hasBootSourceOptions" :span="12">
      <h2 class="text-3xl font-semibold leading-7 text-gray-900 mb-10">
        {{ $t('pageServerPowerOperations.serverBootSettings') }}
      </h2>
      <boot-settings />
    </el-col>
    <el-col :span="12">
      <h2 class="text-3xl font-semibold leading-7 text-gray-900 mb-10">
        {{ $t('pageServerPowerOperations.operations') }}
      </h2>
      <el-alert
        v-if="oneTimeBootEnabled"
        :title="$t('pageServerPowerOperations.oneTimeBootWarning')"
        type="warning"
      />
      <template v-if="isOperationInProgress">
        <el-alert
          type="info"
          :title="$t('pageServerPowerOperations.operationInProgress')"
        />
      </template>
      <template v-else-if="serverStatus === 'off'">
        <el-button
          type="primary"
          data-test-id="serverPowerOperations-button-powerOn"
          @click="powerOn"
        >
          {{ $t('pageServerPowerOperations.powerOn') }}
        </el-button>
      </template>
      <template v-else-if="serverStatus === 'unreachable'">
        <p>{{ serverStatus }}</p>
      </template>
      <template v-else>
        <!-- Reboot server options -->
        <el-form novalidate class="mb-5" @submit.prevent="rebootServer">
          <p>{{ $t('pageServerPowerOperations.immediateReboot') }}</p>
          <button
            variant="primary"
            type="submit"
            class="submit-button"
            data-test-id="serverPowerOperations-button-reboot"
          >
            {{ $t('pageServerPowerOperations.reboot') }}
          </button>
        </el-form>
        <!-- Shutdown server options -->
        <el-form novalidate @submit.prevent="shutdownServer">
          <p>{{ $t('pageServerPowerOperations.immediateShutdown') }}</p>
          <button
            variant="primary"
            type="submit"
            class="submit-button"
            data-test-id="serverPowerOperations-button-shutDown"
          >
            {{ $t('pageServerPowerOperations.shutDown') }}
          </button>
        </el-form>
      </template>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { useGlobalStore } from '@/store/global';
import { useControlStore } from '@/store/Settings/ControlStore';
import { useServerBootSettings } from '@/store/Settings/BootSettingsStore';
import { useI18n } from 'vue-i18n';
import BootSettings from './BootSettings.vue';

const i18n = useI18n();
const globalStore = useGlobalStore();
const controlStore = useControlStore();
const serverBootSettingsStore = useServerBootSettings();
const form = reactive({
  rebootOption: 'immediate',
  shutdownOption: 'immediate',
});

const serverStatus = computed(() => {
  return globalStore.serverStatus;
});
const isOperationInProgress = computed(() => {
  return controlStore.isOperationInProgress;
});
const lastPowerOperationTime = computed(() => {
  return controlStore.lastPowerOperationTime;
});
const oneTimeBootEnabled = computed(() => {
  return serverBootSettingsStore.overrideEnabled;
});
const hasBootSourceOptions = computed(() => {
  let bootOptions = serverBootSettingsStore.bootSourceOptions;
  return bootOptions.length !== 0;
});

onMounted(() => {
  serverBootSettingsStore.getBootSettings();
  controlStore.getLastPowerOperationTime();
});
const powerOn = () => {
  controlStore.serverPowerOn();
};
const rebootServer = () => {
  if (form.rebootOption === 'orderly') {
    ElMessageBox.confirm(
      i18n.t('pageServerPowerOperations.modal.confirmRebootMessage'),
      i18n.t('pageServerPowerOperations.modal.confirmRebootTitle'),
      {
        confirmButtonText: i18n.t('global.action.confirm'),
        cancelButtonText: i18n.t('global.action.cancel'),
      },
    )
      .then(() => {
        controlStore.serverSoftReboot();
      })
      .catch(() => {});
  } else if (form.rebootOption === 'immediate') {
    ElMessageBox.confirm(
      i18n.t('pageServerPowerOperations.modal.confirmRebootMessage'),
      i18n.t('pageServerPowerOperations.modal.confirmRebootTitle'),
      {
        confirmButtonText: i18n.t('global.action.confirm'),
        cancelButtonText: i18n.t('global.action.cancel'),
      },
    )
      .then(() => {
        controlStore.serverHardReboot();
      })
      .catch(() => {});
  }
};
const shutdownServer = () => {
  console.log(321);
  if (form.shutdownOption === 'orderly') {
    ElMessageBox.confirm(
      i18n.t('pageServerPowerOperations.modal.confirmShutdownMessage'),
      i18n.t('pageServerPowerOperations.modal.confirmShutdownTitle'),
      {
        confirmButtonText: i18n.t('global.action.confirm'),
        cancelButtonText: i18n.t('global.action.cancel'),
      },
    )
      .then(() => {
        controlStore.serverSoftReboot();
      })
      .catch(() => {});
  }
  if (form.shutdownOption === 'immediate') {
    ElMessageBox.confirm(
      i18n.t('pageServerPowerOperations.modal.confirmShutdownMessage'),
      i18n.t('pageServerPowerOperations.modal.confirmShutdownTitle'),
      {
        confirmButtonText: i18n.t('global.action.confirm'),
        cancelButtonText: i18n.t('global.action.cancel'),
      },
    )
      .then(() => {
        controlStore.serverHardPowerOff();
      })
      .catch(() => {});
  }
};
</script>
